<template>
  <div>
    <TopNav title="个人中心" />
    <!-- 上半部分 -->
    <div class="profile" @click="$router.push('/edit')">
      <img
        v-if="userInfo.head_img"
        :src="$axios.defaults.baseURL + userInfo.head_img"
        alt=""
        class="logo"
      />
      <img v-else src="@/assets/logo.png" alt="" class="logo" />

      <div class="info">
        <div class="name">
          <span
            class="iconfont"
            :class="{
              iconxingbienan: userInfo.gender === 1,
              iconxingbienv: userInfo.gender === 0
            }"
          ></span>
          {{ userInfo.nickname || userInfo.username }}
        </div>
        <div class="date">1999-09-09</div>
      </div>
      <span class="iconfont iconjiantou1"></span>
    </div>
    <!-- 下半部分 -->
    <ProfileBar
      label="我的关注"
      desc="关注的用户"
      @click.native="$router.push('/follow')"
    />
    <ProfileBar
      label="我的跟帖"
      desc="跟帖/回复"
      @click.native="$router.push('/comment')"
    />
    <ProfileBar
      label="我的收藏"
      desc="文章/视频"
      @click.native="$router.push('./star')"
    />
    <ProfileBar label="编辑" @click.native="$router.push('/edit')" />
    <ProfileBar label="退出" @click.native="logout" />
  </div>
</template>

<script>
import ProfileBar from "../../src/components/ProfileBar";
import TopNav from "../components/TopNav";
export default {
  components: {
    ProfileBar,
    TopNav
  },
  data() {
    return {
      userInfo: {}
    };
  },
  created() {
    // 页面创建完毕, 开始获取数据
    this.$axios({
      url: "/user/" + localStorage.getItem("userId")
      // headers: {
      //   Authorization: localStorage.getItem("token")
      // }
    }).then(res => {
      console.log(res.data);
      //解构res.data
      const { message, data } = res.data;
      if (message == "获取成功") {
        this.userInfo = data;
      }
      // else{
      //   this.$toast.fail("信息获取失败");
      //   // 知道了用户的信息是错的
      //   // 删除信息
      //   localStorage.removeItem('token');
      //   localStorage.removeItem('userId');
      //   //跳转登录页
      //   this.$router.replace('/login')

      // }
    });
  },
  methods: {
    logout() {
      //跳转按钮点击逻辑
      localStorage.removeItem("token");
      localStorage.removeItem("userId");
      this.$toast("退出成功");
      // 跳转过后不应该可以返回到当前页面
      this.$router.replace("/login");
    }
  }
};
</script>

<style lang="less" scoped>
.profile {
  display: flex;
  align-items: center;
  padding: 24/360 * 100vw 20/360 * 100vw;
  border-bottom: 5/360 * 100vw solid #eee;
  .logo {
    width: 70/360 * 100vw;
    height: 70/360 * 100vw;
    border-radius: 50%;
  }
  .info {
    flex: 1;
    padding-left: 10/360 * 100vw;
    .name {
      font-size: 16/360 * 100vw;
      color: black;
      .iconxingbienan {
        color: skyblue;
      }
      .iconxingbienv {
        color: #f63bc0;
      }
    }
    .date {
      font-size: 14/360 * 100vw;
      color: #abc;
      margin-top: 6/360 * 100vw;
      margin-left: 6/360 * 100vw;
    }
  }
}
</style>